// 渲染用户列表
function reader(arr) {
    document.querySelector('tbody').innerHTML = arr.map((item, index) => {
        return `
            <tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.phone}</td>
                <td>${item.suoshuzu}</td>
                <td>${item.admin ? '是' : '否'}</td>
                <td class="${item.state ? '' : 'error'}">${item.state ? '正常' : '异常'}</td>
                <td>
                    <span class="iconfont icon-bianji"></span>
                    <span class="iconfont icon-shanchu"></span>
                </td>
            </tr>`
    }).join('')
    if (arr.length <= 0) {
        document.querySelector('tbody').innerHTML =
            `<div style="color:red;">没有数据</div>`
    }
}
let page = 1
console.log(page);

if (page === 1) {
    document.querySelector('.bottom .prev').disabled = true
}
document.querySelector('.bottom .next').addEventListener('click', function () {
    ++page
    document.querySelector('.bottom .prev').disabled = false
    console.log(page);
    if (page === 3) {
        this.disabled = true
    }

    axios({
        method: 'get',
        url: '/user/list',
        params: {
            page: page,
            count: 2
        }
    }).then(res => {
        // 请求成功
        if (res.status === 200) {
            reader(res.data.list)
        }
    })

})
document.querySelector('.bottom .prev').addEventListener('click', function () {
    page--
    console.log(page);
    if (page === 1) {
        document.querySelector('.bottom .prev').disabled = true
    }
    document.querySelector('.bottom .next').disabled = false
    axios({
        method: 'get',
        url: '/user/list',
        params: {
            page: page,
            count: 2
        }
    }).then(res => {
        // 请求成功
        if (res.status === 200) {
            reader(res.data.list)
        }
    })

})

// 分页渲染
axios({
    method: 'get',
    url: '/user/list',
    params: {
        page: 1,
        count: 2
    }
}).then(res => {
    // 请求成功
    if (res.status === 200) {
        reader(res.data.list)
    }
})
// 搜索功能
let input = document.querySelector('[name="search"]')
document.querySelector('main button').addEventListener('click', function () {
    let searchkey = input.value
    axios({
        method: 'get',
        url: '/user/search',
        params: {
            searchkey
        }
    }).then(res => {
        // 请求成功
        console.log(res);
        if (res.status === 200) {
            reader(res.data.list)
        }
    })
})
